<script setup lang="ts">
  import {
    getBorrowList,
    deleteBorrow,
    getarchiveList,
    openCabinet,
  } from '@/api/archives';
  import useLoading from '@/hooks/useLoading';
  import { Message, Modal, TableInstance } from '@arco-design/web-vue';
  import { omit } from 'lodash';
  import { ref } from 'vue';
  import Edit from './edit/index.vue';
  import Add from './add/index.vue';
  import Submit from './submit/index.vue';
  import { useUserStore } from '@/store/index';
  import { transformDeptTreeSelect } from '@/utils/utils';
  const proTableRef = ref<TableInstance | null>(null);

  const userStore = useUserStore();
  const visible = ref(false);
  const visible1 = ref(false);
  const visible2 = ref(false);
  defineOptions({ name: 'danganzhonghe' });
  const { loading, setLoading } = useLoading(false);
  // setLoading(true);
  const roomOptions = ref<any>(null);

  onMounted(() => {});
  const currentParams = ref({});
  async function request(params: any) {
    const res = await getBorrowList({
      ...params,
    });

    return {
      data: res.data,
    };
  }
  const isDisable = ref(false);
  const SearchType = ref([
    {
      name: 'borrow_code',
      label: '借阅编号',
      type: 'a-input',
      fieldProps: {
        span: 8,
      },
    },
    {
      name: 'borrow_code',
      label: '借阅编号',
      type: 'a-input',
      fieldProps: {
        span: 8,
      },
    },
    {
      name: 'borrow_arc_type',
      label: '档案类型',
      type: 'a-select',
      fieldProps: {
        span: 8,
        allowSearch: true,
        fieldNames: { value: 'cvalue', label: 'clabel' },
      },
      selectOptions: [
        {
          clabel: '综合档案',
          cvalue: 1,
        },
        {
          clabel: '证照档案',
          cvalue: 2,
        },
        {
          clabel: '人事档案',
          cvalue: 3,
        },
        {
          clabel: '财务档案',
          cvalue: 4,
        },
        {
          clabel: '申报档案',
          cvalue: 5,
        },
        {
          clabel: '技术档案',
          cvalue: 6,
        },
      ],
    },
    {
      name: 'borrow_org_id',
      label: '借阅单位',
      type: 'a-select',
      fieldProps: {
        span: 8,
        allowSearch: true,
        fieldNames: { value: 'org_id', label: 'org_name' },
      },
      selectOptions: userStore.allOrgList,
    },
    {
      name: 'borrow_dept_id',
      label: '借阅部门',
      type: 'a-tree-select',
      fieldProps: {
        span: 8,
        data: transformDeptTreeSelect(userStore.allDepts, 'dept_id', 'dept_id'),
      },
    },
    {
      name: 'borrow_user_id',
      label: '借阅用户',
      type: 'a-select',
      fieldProps: {
        span: 8,
        allowSearch: true,
        fieldNames: { value: 'user_id', label: 'user_name' },
      },
      selectOptions: userStore.allUserInfo,
    },
  ]);
  const tableType = [
    { dataIndex: 'borrow_id', slotName: 'id' },
    {
      title: '档案编号',
      dataIndex: 'borrow_code',
    },
    {
      title: '借阅人',
      dataIndex: 'borrow_user_name',
    },
    {
      title: '借阅数量',
      dataIndex: 'borrow_num',
      align: 'center',
    },
    {
      title: '借阅状态',
      dataIndex: 'approval_state_value',
      slotName: 'status',
      options: [
        {
          status: 'normal',
          value: 0,
          label: '待提交',
        },
        {
          status: 'processing',
          value: 1,
          label: '审核中',
        },
        {
          status: 'warning',
          value: 2,
          label: '已撤销',
        },
        {
          status: 'success',
          value: 3,
          label: '已通过',
        },
        {
          status: 'danger',
          value: 4,
          label: '已拒绝',
        },
      ],
    },
    {
      title: '档案类型',
      dataIndex: 'borrow_arc_type',
      slotName: 'tags',
      align: 'center',
      options: [
        {
          value: 1,
          label: '综合档案',
          color: 'green',
        },
        {
          value: 2,
          label: '证照档案',
          color: 'magenta',
        },
        {
          value: 3,
          label: '人事档案',
          color: 'red',
        },
        {
          value: 4,
          label: '财务档案',
          color: 'gold',
        },
        {
          value: 5,
          label: '申报档案',
          color: 'cyan',
        },
        {
          value: 6,
          label: '技术档案',
          color: 'arcoblue',
        },
      ],
    },
    {
      title: '联系电话',
      dataIndex: 'borrow_user_contact',
    },

    {
      title: '单位',
      dataIndex: 'borrow_org_name',
    },
    {
      title: '部门',
      dataIndex: 'borrow_dept_name',
    },

    {
      title: '借阅方式',
      dataIndex: 'borrow_type',
      slotName: 'tags',
      align: 'center',
      options: [
        {
          value: 1,
          label: '本人自取',
          color: '#ff7d00',
        },
        {
          value: 2,
          label: '快递邮寄',
          color: '#0fc6c2',
        },
      ],
    },
    {
      title: '借阅时间',
      slotName: 'splitName',
      firstName: 'borrow_start_time',
      lastName: 'borrow_end_time',
    },
    {
      title: '备注',
      dataIndex: 'borrow_remark',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: (record: any) => {
        let arr = [];
        // 待提交 - 显示编辑，提交，删除按钮 0
        // 审核中 - 显示详情按钮 1
        // 已撤销，已拒绝 - 可修改，可删除 2，4
        // 已通过 - 可删除 3
        if (Number(record.approval_state_value) === 0) {
          arr = [
            {
              name: '提交',
              onClick: (record: any) => {
                visible2.value = true;
                currentParams.value = {
                  id: record.borrow_id,
                };
              },
            },
            {
              name: '编辑',
              onClick: (record: any) => {
                visible1.value = true;
                currentParams.value = {
                  id: record.borrow_id,
                };
                isDisable.value = false;
              },
            },
            {
              name: '删除',
              onClick: (record: any) => {
                deleteBorrow({
                  borrow_ids: [record.borrow_id],
                }).then((res: any) => {
                  proTableRef.value?.setRefresh();
                  Message.success('删除成功！');
                });
              },
            },
          ];
        } else if (Number(record.approval_state_value) === 1) {
          arr = [
            {
              name: '详情',
              onClick: (record: any) => {
                visible1.value = true;
                currentParams.value = {
                  id: record.borrow_id,
                };
                isDisable.value = true;
              },
            },
          ];
        } else if (
          Number(record.approval_state_value) === 2 ||
          Number(record.approval_state_value) === 4
        ) {
          arr = [
            {
              name: '提交',
              onClick: (record: any) => {
                visible2.value = true;
                currentParams.value = {
                  id: record.borrow_id,
                };
              },
            },
            {
              name: '编辑',
              onClick: (record: any) => {
                visible1.value = true;
                currentParams.value = {
                  id: record.borrow_id,
                };
                isDisable.value = false;
              },
            },
            {
              name: '删除',
              onClick: (record: any) => {
                deleteBorrow({
                  borrow_ids: [record.borrow_id],
                }).then((res: any) => {
                  proTableRef.value?.setRefresh();
                  Message.success('删除成功！');
                });
              },
            },
          ];
        } else if (Number(record.approval_state_value) === 3) {
          arr = [
            {
              name: '取',
              onClick: (record: any) => {
                Modal.confirm({
                  title: '系统提示',
                  content: '确定要取出选中的档案吗？',
                  okText: '确定',
                  cancelText: '取消',
                  onOk: () => {
                    openCabinet({
                      arc_id: record.borrow_id,
                      action_type: 2,
                    }).then((res: any) => {
                      console.log();
                      if (res.code === 200) {
                        Message.success(res.msg);
                      }
                    });
                  },
                });
              },
            },
            {
              name: '详情',
              onClick: (record: any) => {
                visible1.value = true;
                currentParams.value = {
                  id: record.borrow_id,
                };
                isDisable.value = true;
              },
            },
            {
              name: '删除',
              onClick: (record: any) => {
                deleteBorrow({
                  borrow_ids: [record.borrow_id],
                }).then((res: any) => {
                  proTableRef.value?.setRefresh();
                  Message.success('删除成功！');
                });
              },
            },
          ];
        }
        return arr;
      },
    },
  ];
  function handleRefresh() {
    loading.value = true;
    proTableRef.value?.setRefresh();
    setLoading(false);
  }
</script>
<template>
  <div class="container">
    <pro-table
      v-if="!loading"
      ref="proTableRef"
      :formType="SearchType"
      title="档案借阅"
      :request="request"
      :tableType="tableType"
    >
      <template #btns>
        <a-space>
          <a-button
            type="primary"
            @click="
              () => {
                visible = true;
              }
            "
          >
            <template #icon>
              <icon-plus-circle-fill />
            </template>
            借阅申请
          </a-button>
        </a-space>
      </template>
      <template #options>
        <Add
          v-if="visible"
          v-model:visible="visible"
          @refresh="handleRefresh"
        />
        <Edit
          v-if="visible1"
          v-model:visible="visible1"
          :params="currentParams"
          :form-type="sonFormType"
          @refresh="handleRefresh"
          :disable-form="isDisable"
        />
        <Submit
          v-if="visible2"
          v-model:visible="visible2"
          :params="currentParams"
          @refresh="handleRefresh"
        />
      </template>
    </pro-table>
    <div
      v-else-if="loading"
      style="
        width: 100%;
        height: 700px;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <a-spin :size="10" dot />
    </div>
  </div>
</template>

<style scoped lang="less">
  .formContent {
    width: 100%;
  }
  // tree的css样式
  :deep(.icon) {
    width: 1.2em !important;
    height: 1.2em !important;
  }

  :deep(.arco-tree-node-title-text) {
    font-size: 12px;
    width: 140px;
    overflow: hidden; /* 隐藏溢出内容 */
    white-space: nowrap; /* 禁止换行 */
    text-overflow: ellipsis; /* 显示省略号 */
  }

  :deep(.arco-tree-node-indent-block) {
    width: 0px !important;
  }
  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>
